.bb {
    font-family: "Slate Pro",Slate,"Myriad Pro","BBAlpha Sans",Helvetica;
    font-size: 12pt;
    background:white;
    color:black;
    .view {
        header {
            background:#00609E;
            background:-ms-linear-gradient(65deg, #00609E 0%,#00AFEE 100%);
            background:-webkit-gradient(linear, left bottom, right top, color-stop(0%,#00609E), color-stop(100%,#00AFEE));
            background:-webkit-linear-gradient(65deg, #00609E 0%,#00AFEE 100%);
            background:linear-gradient(65deg, #00609E 0%,#00AFEE 100%);
            border-style:solid;
            border-width:1px;
            border-color:#009CE1 transparent #004E92 transparent;
            .backButton {
                display: block;
                position: absolute;
                line-height:70px;
                left: 5px;
                text-overflow: ellipsis;
                font-size: 10px;
                padding: 0;
                color: #fff;
                text-shadow: none;
                background-color: transparent;
                border:none;
                border-color: transparent;
                height: 44px;
                top:0;
                border-radius: 0;
                box-shadow:none;
                margin: 0;
                padding-left: 0;
                text-align: center;
                width:50px;
                padding:0 !important;
                margin:0 !important;
            }
            .backButton::before {
                z-index: -1;
                font-size:22px;
                position: absolute;
                left: 5px;
                text-align: center;
                border-radius: 0;
                border: none;
                border-color: transparent;
                box-shadow: none;
                -webkit-transform: none;
                transform: none;
                font-family: 'chevron';
                speak: none;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                content: "\f054";
                top:-10px;
                -webkit-transform:rotate(180deg);
                transform:rotate(180deg);
                background-color: transparent;
            }
            .backButton::after {
                z-index: -1;
                font-size:24px;
                content: ' ';
                position: absolute;
                font-weight:bold;
                background-color: transparent;
                left:55px;
                height:48px;
                top:-5px;
                width:2px;
                background: #0aa9dc;
                margin:auto;
                text-align: center;
                border-radius: 0;
                border: none;
                border-color: transparent;
                box-shadow: none;
                -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
            }
            .button-grouped {
                & > .button.pressed {
                    background:#07a;
                }
            }
        }
        footer {
            border:none;
            border-radius:0px;
            background:black;
            padding:0;
            -webkit-box-shadow:none;
            box-shadow: none;
            & > a:not(.button) {
                height:49px;
                top:0px;
                border-top:4px solid #000;
                background:#1e1e1e;
            }
            & > a.pressed:not(.button) {
                border:0px;
                border-top:4px solid #0aa9dc;
                border-radius:0px;
                background:#3a3a3a;
                color:white;
            }
            & > a:not(:last-of-type):not(.pressed):not(.button) {
                border-right:1px solid black;
            }
            & > a.icon.pressed:not(.button):before {
                color: white;
            }
        }
        .panel {
            background:#fff;
        }
    }
    view {
        header {
            h1 {
                text-shadow:rgba(0,0,0,0.8) 0 1px 0;
                font-weight:normal;
            }
            .button {
                color:#fff;
                background:none;
                text-shadow:0 -1px 0 #333;
                border-color:transparent;
            }
        }
    }
    .list {
        font-weight: normal;
    }
    .afPopup {
        border: solid 1px #ccc;
        border-radius: 3px;
        background:inherit;
        color:inherit;
        padding:0;
        & > header {
            font-weight:normal;
            font-size:20px;
            text-align:center;
            margin:0;
            padding:8px;
            color:white;
            border-radius: 2px;
            background:#00609E;
            background:-ms-linear-gradient(65deg, #00609E 0%,#00AFEE 100%);
            background:-webkit-gradient(linear, left bottom, right top, color-stop(0%,#00609E), color-stop(100%,#00AFEE));
            background:-webkit-linear-gradient(65deg, #00609E 0%,#00AFEE 100%);
            background:linear-gradient(65deg, #00609E 0%,#00AFEE 100%);
        }
        & > div {
            text-align:center;
            padding:10px;
        }
        & > footer {
            padding:5px;
            & > a#cancel {
                width:120px;
            }
            & > a#action {
                width:120px;
            }
        }
    }
    #af_actionsheet {
        background:white;
        color:inherit;
        a {
            border-radius:5px;
            border:1px solid #ccc;
            background:#eee;
            color:#111;
        }
    }
}
.bb .button ,.bb .button-grouped *,.bb .button-grouped &>.button:first-child,.bb .button-grouped.vertical *,.bb .button-grouped.vertical &>.button:last-child,.bb &>.header .button-grouped &>.button {
    border-color:#ccc;
}
